<template>
  <div class="bottom">
    <span class="all-check-span">全选</span>

    <div class="all-price">合计:￥{{totalPrice}}</div>

    <button class="buy"
            @click="buyClick"
            :disabled="isNoCheck">去结算({{totalProduct}})个</button>

    <check-button class="check-all-button" @click.native="allCheckClick" :is-check="isAllCheck"></check-button>
  </div>
</template>

<script>
  import CheckButton from "components/content/check_button/CheckButton";

  import {verToken, formatDate} from 'common/utils'
  import {mapGetters} from 'vuex'

  import {addOrder, addOrderList, prefectUserInfo} from 'network/user'
  import {searchUserByUsername, updateGoods, getGoodsList} from 'network/mix'

  export default {
    name: "Bottom",
    components: {
      CheckButton,
    },
    data () {
      return {
        product_buy: [],
        user: { // 用户对象(即当前的买家)
        },
        bus_user: { // 用户对象,商品的商家
        },
        goods: { // 商品对象
          id: 0,
          name: '',
          describe: '',
          price: 0,
          store: 0,
          src: '',
          goods_category_id: 0,
          index: 0,
        },
      }
    },
    computed: {
      ...mapGetters({
        length: 'getCarListLength',
        list: 'getCarList',
        token: 'getToken'

      }),
      totalPrice() { /**计算全部商品的总价*/
        return this.$store.getters.getCarList
          .filter(item => { //过滤check为true的值
            return item.check
          })
          .reduce((preValue, item) => { //计算过滤后的商品的总价
            return preValue + item.goods_price * item.goods_count
          }, 0)
      },
      totalProduct() { /**计算购物车全部的商品种类数*/
        return this.$store.getters.getCarList
          .filter(item => item.check).length //获取所有选中的商品的种类数
      },
      isAllCheck() { /**判断是否全部选中*/
        if (this.$store.getters.getCarListLength === 0) return false //如果购物车没有商品,返回false,即没有全选

        /**使用数组 find高级函数 实现*/
        return !this.$store.getters.getCarList.find(item => !item.check) /**如果某个项目找到没有check属性,就返回true;再进行取反,即返回false,表示没有全部选中*/

      },
      isNoCheck() { /**判断没有选中商品*/
        if (this.length === 0) return true /**如果长度为0,返回true,表示没有选中任何商品*/
        return !this.list.find(item => item.check) /**如果某个项目找到check属性,就返回true,再进行取反,即返回false,表示存在选中的商品*/
      },

    },
    created() {
      if (this.token) {
        searchUserByUsername(verToken(this.token).username)
          .then(res => {
            // console.log(res);
            this.user = res.user
            this.user.birthday = new Date(res.user.birthday);
          })
          .catch(error => {
            console.log(error);
          })

      }
    },
    methods: {
      allCheckClick() { /**点击全选按钮*/
        if (this.isAllCheck) { //如果是全部选中
          this.list.forEach(item => item.check = false) //把所有的item的check变成false
        } else { //如果都没选中或者部分选中
          this.list.forEach(item => item.check = true) //把所有的item的check变成true
        }
      },
      async buyClick() { /**结算*/
        if (confirm('确认购买吗?您此次将消费￥' + this.totalPrice + '元')) {
          if (this.isNoCheck) { // 如果没有选中商品
            this.$wran_ty_toast.toShow('没有商品结账', 2000)
          } else {
            if (this.user.money < this.totalPrice) { // 用户的资金小于待支付的总金额
              this.$mes_ty_toast.toShow('您的资金不足！！！', 2000)
            } else { // 否则,进行支付操作
              let date = new Date() // 获取当前时间
              let dateCode = formatDate(date, 'yyyyMMddhhmmss'); // 通过当前时间得到一个字符码
              let userCode = this.user.username; // 通过用户名获取一个字符码

              this.user.money = this.user.money - this.totalPrice // 计算出用户的剩余资金,用于之后的更新
              // console.log(dateCode + userCode);

              let order =  { // 创建订单对象
                code: dateCode + userCode,
                user_username: this.user.username,
                time: formatDate(date, 'yyyy-MM-dd hh:mm:ss'),
                amount: this.totalPrice
              }
              // console.log(order);
              await this.mAddOrder(order) // 发送创建订单axios网络请求

              this.product_buy = this.$store.getters.getCarList.filter(item => item.check); // 获取选中的商品

              for (let item of this.product_buy) {
                // this.mGetGoodsList(item.id) // 获取该商品的信息axios网络请求
                // console.log(item);

                await searchUserByUsername(item.user_username)
                  .then(res => {
                    this.bus_user = res.user // 获取当前商品的商家信息
                    this.bus_user.birthday = new Date(res.user.birthday);
                  })
                console.log('商家' + this.bus_user);
                // console.log(this.bus_user.username + '--' + this.bus_user.money);
                this.bus_user.money = this.bus_user.money + item.goods_price * item.goods_count; // 当前商家的资金增加
                console.log('商家收获后');
                // console.log(this.bus_user.username + '--' + this.bus_user.money);
                await this.mPreUserInfo(this.bus_user) // 修改商家信息

                let order_list = { // 创建订单明细对象
                  order_code: dateCode + userCode,
                  // order_code: '202101031434181365137828',
                  goods_id: item.id,
                  goodsprice: item.goods_price,
                  goodscount: item.goods_count,
                  price: item.goods_price * item.goods_count
                }
                // console.log(order_list);
                await this.mAddOrderList(order_list) // 发送创建订单明细axios请求

                let goods = { // 创建修改库存后的商品对象
                  id: item.id,
                  name: item.name,
                  describe: item.describe,
                  price: item.goods_price,
                  store: item.goods_store - item.goods_count, // 库存修改
                  src: item.src,
                  goods_category_id: item.goods_category_id,
                  index: item.index,
                }
                // console.log(goods);
                await this.mUpdateGoods(goods) // 发送更新商品信息的axios网络请求
                this.$store.dispatch('aDestroyCarToCarOfGoods', goods) // 将此商品从购物车移除
              }

              await this.mPreUserInfo(this.user) // 发送更新用户的axios网络请求，更新买家的信息
              // console.log('支付成功');
              this.$succ_ty_toast.toShow(this.user.username + '用户,本次您共消费' + order.amount + '元', 5000)
            }

          }
        }
      },

      mAddOrder(order) { // 创建订单
        addOrder(order)
          .then(res => {
            // console.log(res);
          })
        .catch(error => {
          console.log('创建订单失败！！！');
          console.log(error);
        })

      },
      mAddOrderList(order_list) { // 创建订单明细
        addOrderList(order_list)
          .then(res => {
            console.log(res);
          })
        .catch(error => {
          console.log('创建订单明细失败！！！');
          console.log(error);
        })
      },
      // mGetGoodsList(id) { // 通过id获取商品信息
      //   getGoodsList(id, 0, 0, '', '', 0)
      //     .then(res => {
      //       console.log('dsdsfsfdsdf');
      //       // console.log(res.page.list[0]);
      //       this.goods = res.page.list[0] // 获取当前商品的信息
      //       console.log(this.goods);
      //     })
      // },
      mUpdateGoods(goods) {
        updateGoods(goods)
          .then(res => {
            // console.log(res);
          })
        .catch(error => {
          console.log(error);
        })
      },
      mPreUserInfo(user) { // 完善用户信息axios网络请求,用于更新用户的money
        prefectUserInfo(user)
          .then(res => {
            // console.log(res);
          })
        .catch(error => {
          console.log(error);
        })
      }

    }
  }
</script>

<style scoped>
  .bottom {
    position:relative;
    height: 100px;
  }
  .all-check-span {
    position: absolute;
    right: 40px;
    bottom: 10px;
  }
  .check-all-button {
    position: absolute;
    right: 10px;
    bottom: 10px;

    border-radius: 50%;
  }
  .check-all-button:hover {
    cursor: pointer;
  }
  .all-price {
    position: absolute;
    top: 50%;
    left: 10px;

    font-size: 25px;
    font-weight: bold;
    color: red;
  }
  .buy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 40px;

    font-size: 20px;
    font-weight: bold;
    color: white;

    outline: none;
    border: none;
    border-radius: 6px;
    background-color: darkgoldenrod;
  }
  .buy:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>